<template>
	<div class="card-display">
		<div class="parent-box">
			<div class="child-box">
				<div class="header">平假名</div>
				<div class="content">
					<boxDisplayVue
						:showAnswer="0 == showIndex"
						:content="cardKana.hiragana"
						:forceShowAnswer="forceShowAnswer"
					></boxDisplayVue>
				</div>
			</div>
			<div class="child-box">
				<div class="header">片假名</div>
				<div class="content">
					<boxDisplayVue
						:showAnswer="1 == showIndex"
						:content="cardKana.katakana"
						:forceShowAnswer="forceShowAnswer"
					></boxDisplayVue>
				</div>
			</div>
			<div class="child-box">
				<div class="header">罗马字</div>
				<div class="content">
					<boxDisplayVue
						:showAnswer="2 == showIndex"
						:content="cardKana.romanji"
						:forceShowAnswer="forceShowAnswer"
					></boxDisplayVue>
				</div>
			</div>
		</div>

		<div class="table-display">
			<el-table border :data="tableData" class="home-table">
				<el-table-column
					property="rightCount"
					label="正确次数"
					align="center"
				/>
				<el-table-column
					property="errorCount"
					label="错误次数"
					align="center"
				/>

				<el-table-column
					v-if="width > 768"
					property="totalCount"
					label="所有次数"
					align="center"
				/>
				<el-table-column property="rateTotal" label="正确率" align="center" />
			</el-table>
		</div>
		<div class="control-button">
			<el-button type="primary" @click="clickShowAnswer" v-if="!forceShowAnswer"
				>SHOW</el-button
			>
			<template v-else>
				<el-button type="success" @click="clickRight">RIGHT</el-button>
				<el-button type="danger" @click="clickError">ERROR</el-button></template
			>
		</div>
	</div>
</template>

<script setup lang="ts">
import { makePercentage } from "@/utils/float";
import { useWindow } from "@/utils/useWindow";
import { computed, ref } from "vue";
import { useStore } from "../store/app";
import boxDisplayVue from "./boxDisplay.vue";

const { kana, addRightCount, addErrorCount } = useStore();

const props = defineProps({
	index: {
		type: Number,
		default: 0,
	},
	showIndex: {
		type: Number,
		default: 0,
	},
});

const { width } = useWindow();
const rightCount = ref(0);
const errorCount = ref(0);
const forceShowAnswer = ref(false);
const emit = defineEmits(["clickNextCard"]);

const cardKana = computed(() => kana[props.index]);

const rateTotal = computed(() => {
	if (rightCount.value + errorCount.value <= 0) {
		return makePercentage(0);
	}

	const v = rightCount.value / (rightCount.value + errorCount.value);
	return makePercentage(v);
});

const tableData = computed(() => [
	{
		rightCount,
		errorCount,
		totalCount: rightCount.value + errorCount.value,
		rateTotal,
	},
]);

function clickShowAnswer() {
	forceShowAnswer.value = true;
}

function clickRight() {
	rightCount.value++;
	addRightCount(props.index);
	clickNextCard();
}

function clickError() {
	errorCount.value++;
	addErrorCount(props.index);
	clickNextCard();
}

function clickNextCard() {
	forceShowAnswer.value = false;
	emit("clickNextCard");
}
</script>

<style lang="less">
.card-display {
	width: 100%;
	margin-top: 15px;

	.table-display {
		display: flex;
		margin-top: 25px;
		justify-content: center;
	}

	.parent-box {
		display: flex;
		align-items: center;
		justify-content: center;

		.child-box {
			display: flex;
			align-items: center;
			flex-direction: column;
			.header {
				height: 35px;
				font-size: 20px;
				font-family: "kaiti";

				@media screen and(max-width: 900px) {
					height: 30px;
					font-size: 18px;
				}
			}
			.content {
				width: 150px;
				height: 150px;
				margin-left: 15px;
				margin-right: 15px;

				border: solid 1.5px #d5c8c7;

				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 4rem;

				@media screen and(max-width: 900px) {
					width: 100px;
					height: 100px;
					margin-left: 5px;
					margin-right: 5px;
					font-size: 3.5rem;
				}

				@media screen and(max-width: 768px) {
					width: 90px;
					height: 90px;
					margin-left: 3px;
					margin-right: 3px;
				}
			}
		}
	}
	.home-table {
		width: 60%;
		@media screen and(max-width: 900px) {
			width: 90%;
		}

		@media screen and(max-width: 768px) {
			width: 100%;
		}
	}

	.control-button {
		display: flex;
		margin-top: 20px;
		padding-left: 12%;
		padding-right: 12%;
		justify-content: space-around;
	}
}
</style>
